<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/base.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="./js/jquery.validate.js"></script>
    <style type="text/css">
       .top-nav-box{
           height:102px;
           box-shadow:1px 1px 10px 1px #e2e2e2;
       }
       .top-nav-box .top-nav{
           height:102px;
       }
       .top-nav .logo{
           width:162px;
           height:102px;
           background: url(./images/logo.png) no-repeat center left;
       }
       .top-nav h1{
           height:102px;
           line-height:102px;
       }
        .center{
            width:986px;
            height:744px;
            margin:0 auto;
        }
        .center .center-left{
            margin:60px 0 0 182px;
            width:504px;
            height:622px;
            float: left;
        }
        .center .center-left  .left-box{
            width:400px;
            height:52px;
            border:1px solid #ccc;
            margin-bottom:30px;
            font-size:14px;
            color: #666;
        }
        .error{
            color:red;
            padding:8px 0 0 2px;
        }
        .left-box .span{
            display: inline-block;
            height:50px;
            line-height: 50px;
            width:130px;
            text-indent: 1.5em;
        }
       .left-box .span-1, .left-box .span-5{
           letter-spacing: 1em;
       }
       .left-box .span-2, .left-box .span-3{
           letter-spacing: 0.3em;
       }
       .left-box .input{
           width:255px;
           height:50px;
           border:none;
           outline:none;
           background: transparent;
           font-size:14px;
           color: #666;
       }
       .left-foot{
           font-size:12px;
           height:20px;
           line-height: 20px;
           margin:35px 0;
       }
       .left-foot input{
           vertical-align: middle;
           height:inherit;
       }
       .btn{
           display: block;
           width:400px;
           height:52px;
           border:none;
           outline: none;
           background: #e22;
           font-size:16px;
           color: #fff;

       }
        .center-right{
            float: right;
            margin-top:60px;
            width:295px;
            height:600px;
            border-left:1px solid #eee ;
        }
        .center-right div{
            width:200px;
            height:80px;
            line-height: inherit;
            margin-left:90px;
        }
       .center-right .right-1{
           border-bottom:1px solid #eee;
           background:url(./images/dalou.png) no-repeat center left;
       }
       .center-right .right-2{
           background:url(./images/diqiu.png) no-repeat center left;
       }
       .center-right a{
           display: inline-block;
           height:14px;
           margin:25px 0 0 42px;
           color: #666;

       }
       .foot .foot-list{
           border-top: 1px solid #eee;
       }
    </style>
</head>
<body>
<div class="contain">
    <div class="top-nav-box">
        <div class="top-nav">
            <a href="#" class="logo"></a>
            <h1>欢迎登陆</h1>
            <a href="#" class="logo-page">登录页面，调查问卷</a>
        </div>
    </div>
    <div class="center">
        <div class="center-left">
            <form action="" class="form">
                <div class="left-box">
                    <span class="span span-1">用户名</span>
                    <input type="text" name="username" placeholder="您的账户名和登录名 " class= "input">
                </div>
                <div class="left-box">
                    <span class="span span-2">设置密码</span>
                    <input type="password" name="psd" placeholder="建议至少使用两种字符组合" class= "input" id="psd">
                </div>
                <div class="left-box">
                    <span class="span span-3">确认密码</span>
                    <input type="password" name="psds" placeholder="请再次输入密码" class= "input">
                </div>
                <div class="left-box">
                    <span class="span span-4">中国 0088</span>
                    <input type="text" name="username" placeholder="建议使用常用手机" class= "input">
                </div>
                <div class="left-box">
                    <span class="span span-5">验证码</span>
                    <input type="text" name="username" placeholder="请输入验证码" class= "input">
                </div>
                <div class="left-box">
                    <span class="span span-6">手机验证码</span>
                    <input type="text" name="username" placeholder="请输入手机验证码" class= "input">
                </div>
                <div class="left-foot">
                    <input type="checkbox"/>
                    阅读并同意 <a href="#">《京东用户注册协议》</a><a href="#">《隐私政策》</a>
                </div>
                <button type="submit" class="btn">立即注册</button>
            </form>
        </div>
        <div class="center-right">
            <div class="right-1"><a href="#">企业用户注册</a></div>
            <div class="right-2"><a href="#">INTERNATIONAL CUSTOMERS</a></div>
        </div>
    </div>
    <div class="foot">
        <div class="foot-list">
            <ul>
                <li><a href="">关于我们</a></li><span>|</span>
                <li><a href="">联系我们</a></li><span>|</span>
                <li><a href="">人才招聘</a></li><span>|</span>
                <li><a href="">商家入驻</a></li><span>|</span>
                <li><a href="">广告服务</a></li><span>|</span>
                <li><a href="">手机京东</a></li><span>|</span>
                <li><a href="">友情链接</a></li><span>|</span>
                <li><a href="">销售联盟</a></li><span>|</span>
                <li><a href="">京东社区</a></li><span>|</span>
                <li><a href="">京东公益</a></li><span>|</span>
                <li><a href="">English Site</a></li>
            </ul>
        </div>
        <div class="foot-foot">Copyright © 2004-2017  京东JD.com 版权所有</div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function(){
        $(".form").validate({
            rules: {
                username: {
                    required: true,
                    minlength: 5
                },
                psd: {
                    required: true,
                    minlength: 5
                },
                psds: {
                    required: true,
                    minlength: 5,
                    equalTo: "#psd"
                }
            },
            messages: {

                username: {
                    required: "请输入用户名",
                    minlength: "用户名必需由两个字母组成"
                },
                psd: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于 5 个字母"
                },
                psds: {
                    required: "请再次输入密码",
                    minlength: "密码长度不能小于 5 个字母",
                    equalTo: "两次密码输入不一致"
                }
            }
        });
    });
</script>
</html>